<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script th:src="@{/ajax/libs/report/echarts/echarts.min.js}"></script>
    
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        function randomData() {
            value = value + Math.random() * 21 - 10;
            return {
                value: [
                    ++xvalue,
                    Math.round(value)
                ]
            };
        }
        var xvalue = 1;
        var data = [];
        var value = Math.random() * 1000;
        for (var i = 0; i < 10; i++) {
            data.push(randomData());
        }

        option = {
            title: {
                text: '动态数据 + 时间坐标轴'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };
        myChart.setOption(option);

        setInterval(function () {
        	console.log(option.xAxis);

            //for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            //}

            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);

    </script>
</body>
</html>